<template>
<div class="add-graph-right">
    <Collapse v-model="activeNames"  class="right-content">
        <Panel name="1">
            图表属性
            <div slot="content">
                <div class="right-row"  >
                    <span class="r-tit">名称</span>
                    <div class="r-cnt">
                        <Input    clearable placeholder="图表名称"  v-model="chartOptions.graphName" @on-blur="changeGraphName">
                        </Input>
                    </div>
                </div>
                <Checkbox class="m-b-15" v-model="graphTitle.sysn">同步显示图表标题</Checkbox>
                <!-- <div class="right-row"  >
                    <span class="r-tit">
                        <div>标签</div>
                        <div>(用;区分)</div>
                    </span>
                    <div class="r-cnt">
                        <Input  type="textarea"  clearable placeholder="元件标签(多个元件请用;区分)" :rows="2"  v-model="chartOptions.graphTag"  >
                        </Input>
                    </div>
                </div> -->
                <!-- <div class="right-row p-t-10">
                    <span class="r-tit">私密性</span>
                    <div class="r-cnt">
                        <RadioGroup v-model="chartOptions.access" type="button">
                            <Radio label="private">私密</Radio>
                            <Radio label="public">公开</Radio>
                        </RadioGroup>
                    </div>
                </div> -->
                <div class="right-row"  >
                    <span class="r-tit">描述</span>
                    <div class="r-cnt">
                        <Input slot="content" type="textarea" :rows="2"  placeholder="描述"  v-model="chartOptions.remark"> </Input>
                    </div>
                </div>
                <div class="right-row"  >
                    <span class="r-tit">主题选择</span>
                    <div class="r-cnt">
                        <span class="chart-theme" style="background:#fef8ef" title="默认主题" @click="choiceTheme('default')"></span>
                        <span class="chart-theme" style="background:#293411" title="暗黑" @click="choiceTheme('chalk')"></span>
                        <span class="chart-theme" style="background:#5b5c6e" title="浅灰" @click="choiceTheme('purple-passion')"></span>
                        <span class="chart-theme" style="background:#64d5c3" title="浅绿" @click="choiceTheme('wonderland')"></span>
                    </div>
                </div>

            </div>

        </Panel>
        <Panel name="2">
            图表类型
            <ul class="right-graph-type" slot="content">
                <li   class="disabled" v-for="(item,index) in graphAllList" :key="index"
                :class="{'active':item.active,'selected':item.value==graphType}">
                    <div @click="choiseChartType(item)"  class="svg-full">
                    </div>
                    <embed :src="url+item.icon" width="30" height="30" type="image/svg+xml" :class="{'active':item.active,'selectedEmbed':item.value==graphType}" />
                    <div>{{item.name}}</div>
                    <!-- <span :class="item.icon" style="font-size:26px;display: inline-block;width: 44px;height: 40px;"></span> -->
                </li>
            </ul>

        </Panel>
        <Panel   name="3">
            标题
            <div slot="content">
                <div class="right-row" v-if="!graphTitle.sysn">
                    <span class="r-tit">主标题</span>
                    <div class="r-cnt">
                        <Input     clearable placeholder="主标题"  v-model="titleInfo.text"  > </Input>
                    </div>
                </div>
                <div class="right-row">
                    <span class="r-tit">副标题</span>
                    <div class="r-cnt">
                        <Input     clearable placeholder="副标题"  v-model="titleInfo.subtext"  > </Input>
                    </div>
                </div>
                <div class="right-row">
                    <span class="r-tit">文字位置</span>
                    <div class="r-cnt">
                        <RadioGroup v-model="titleInfo.textAlign">
                            <Radio label="left"><span>居左</span></Radio>
                            <Radio label="center"><span>居中</span></Radio>
                            <Radio label="right"><span>居右</span></Radio>
                        </RadioGroup>
                    </div>
                </div>
                <div class="right-row">
                    <span class="r-tit">标题偏移</span>
                    <div class="r-cnt">
                        <Slider v-model="titleLeft" :min="5" :max="90" :tip-format="formatTooltip"></Slider>
                    </div>
                </div>
            </div>
        </Panel>
        <Panel  name="4" v-if="graphOptions.xAxis!=null && graphOptions.xAxis.length>0">
            坐标X轴
            <div slot="content" >
                <div v-for="(item,index) in graphOptions.xAxis" :key="index">
                    <Checkbox v-model="graphOptions.xAxis[index].show" >显示X轴</Checkbox>
                    <div class="right-row" v-if="item.show">
                        <!-- <Select class="box-class"  placeholder="字体" v-model="graphOptions.xAxis[index].axisLabel.fontFamily"  >
                            <Option  v-for="its in fontList"  :key="its.value" :label="its.label" :value="its.value">
                            </Option>
                        </Select> -->
                        <span class="r-tit">字体大小</span>
                        <div class="r-cnt">
                            <Select  class="box-class" placeholder="大小" v-model="graphOptions.xAxis[index].axisLabel.fontSize" >
                                <Option  v-for="its in 24" v-if="its>=12" :key="its" :label="its+'px'" :value="its">
                                </Option>
                            </Select>
                        </div>
                    </div>
                    <div class="right-row" v-if="item.show">
                        <span class="r-tit">文字方向</span>
                        <div class="r-cnt">
                            <Select  class="box-class" placeholder="方向" v-model="graphOptions.xAxis[index].axisLabel.rotate"
                                vertical-align="top">
                                <Option  v-for="its in rotateList"  :key="its.value" :label="its.label" :value="its.value">
                                </Option>
                            </Select>
                        </div>
                    </div>
                    <!-- <div class="right-row" v-if="item.show">
                        <span class="r-tit">字体颜色</span>
                        <div class="r-cnt">
                            <span class="demonstration"></span>
                            <ColorPicker  v-model="graphOptions.xAxis[index].axisLabel.color" size="small" style="vertical-align:buttom"></ColorPicker>
                        </div>
                    </div> -->
                </div>
            </div>
        </Panel>
        <Panel  name="5" v-if="graphOptions.series!=null && graphOptions.series.length>0">
            图形属性
            <div slot="content"  >
                <options-series  :series="graphOptions.series" :graphOptions="graphOptions">
                </options-series>
            </div>
        </Panel>
        <!-- <Panel   name="6">
            坐标Y轴
            <div slot="content">
                <div class="right-row">
                    <span class="r-tit">标题</span>
                    <div class="r-cnt">
                        <Input    v-model="yAxisInfo.name"  > </Input>
                    </div>
                </div>
            </div>
        </Panel> -->
        <!-- <Panel   name="7">
            图表样式
            <div slot="content">
                线条样式
                <input type="radio" value="0" v-model="seriesInfo.smooth"  ng-change="lazySaveChart({only_redraw:true},0)" />直线
                <input type="radio" value="0.5" v-model="seriesInfo.smooth"  ng-change="lazySaveChart({only_redraw:true},0)" />曲线
            </div>
        </Panel> -->
    </Collapse>
</div>
</template>

<script>
import util from  'util'
import optionsSeries from './options-series.vue'
import {chartUtil,chartOptions} from '@/assets/js/graph-chart'
export default {
    name: 'graphRight',
    components:{optionsSeries},
    props: {
        //初始化默认的options参数
        initoptions:{
            type:Object,
            default:function(){
                return {};
            }
        },
        //可以选择的图表的列表集合
        graphChartList:{
            type:Array,
            default:function () {
                return []
            }
        },
        initdata:{
            type:Object,
            default: function () {
                return {}
            }
        },
        //当前选择的图表类型
        graphType:{
            type:String
        },
        graphOptions:{
            type:Object,
            default:function(){
                return {};
            }
        },
        numbers:{
            type:Array
        },
        groups:{
            type:Array
        }
    },
    data () {
        return {
            url:'',
            activeNames:['1','2','3','4','5','6','7'],
            chartOptions:{
                graphName:'',
                graphType:'',
                access:'private',
                graphX:{},
                graphY:{},
                graph:{},
                remark:''
            },

            graphAllList:[
                {value:"table",name:"表格图",icon:"static/svg/table-map.svg"},


                {value:"line",name: "折线图",icon:"static/svg/line-chart.svg"},
                {value:"line_area",name:"折线面积",icon:"static/svg/polyline-area.svg"},

                {value:"gauge",name:"计量图",icon:"static/svg/metering-chart.svg"},
                {value:"scatter",name:"散点图",icon:"static/svg/scatter-plot.svg"},
                {value:"bar",name:"柱状图",icon:"static/svg/histogram.svg"},
                {value:"bar_type",name:"条形图",icon:"static/svg/bar-chart.svg"},
                {value:"funnel",name:"漏斗图",icon:"static/svg/funnel-chart.svg"},
                {value:"pie",name:"饼图",icon:"static/svg/pie-chart.svg"},
                {value:"map",name:"地图",icon:"static/svg/map.svg"},
                // {value:"pie_more",name:"环形图",icon:"static/svg/ring-diagram.svg"},
                {value:"bar_pile",name:"柱状堆叠",icon:"static/svg/column-stacking.svg"},
                {value:"bar_type_pile",name:"条形堆叠",icon:"static/svg/strip-stack.svg"},
                // {value:"bar_pile_percent",name:"柱百分比",icon:"static/svg/column-stacking-percentage.svg"},
                // {value:"bar_type_pile_percent",name:"条百分比",icon:"static/svg/strip-stack-percentage.svg"},
                // {value:"tree",name:"树状图"},


            ],
            fontList: [
                {value: 'SimSun', label: '宋体'},
                {value: 'SimHei',label: '黑体'},
                {value: 'Microsoft Yahei',label: '微软雅黑'},
                {value: 'Microsoft JhengHei',label: '微软正黑体'},
                {value: 'KaiTi',label: '楷体'},
                {value: 'LiSu',label: '隶书'},
                {value: 'Times New Roman',label: 'Times New Roman'},
                {value: 'Verdana',label: 'Verdana'},
                {value: 'Arial',label: 'Arial'},
                {value: 'Times',label: 'Times'}
            ],
            rotateList:[
                {value:"0",label:"横向"},
                {value:"90",label:"竖向"},
                {value:"45",label:"左倾斜45"},
                {value:"-45",label:"右倾斜45"}
            ],
            graphTitle:{
                sysn:true
            },
            //图表 标题设置
            titleInfo:{
                text: '',
                subtext: '',
                textAlign:'center',
                left:'10%'
            },
            titleLeft:10,
            graphSelected:'',
        }
    },
    watch:{
        titleLeft:function(newValue,oldValue){
            this.titleInfo.left=newValue+"%";
        },
        titleInfo:{
            handler(newValue, oldValue) {
                this.$emit("changeOptions",{key:'title',value:this.titleInfo})
    　　　　},
    　　　　deep: true
        },
        graphType:{
            handler(val,oldValue) {
                console.log('graphType cange')
                this.sysnOptionByTypeAndCloum({value:this.graphType,oldValue:oldValue});
    　　　　},
    　　　　deep: true
        },
        graphChartList:{
            handler(newValue, oldValue) {
                this.watchGraphChartList();
    　　　　},
    　　　　deep: true
        },

    },
    methods:{
        init(){
            // console.log('right',this.graphOptions)
            this.queryDatasources();
            this.initEditInfoSet();
            // this.sysnOptionByTypeAndCloum({value:this.graphType});
            this.watchGraphChartList();
            var url =window.location.href;
            if(url.indexOf("#")!=-1){
                 url =url.substring(0,url.lastIndexOf("#"));
                if(url.indexOf("html")!=-1){
                    url = url.substring(0,url.lastIndexOf("/"))+'/';
                }
            }

            this.url=url;
        },
        //选择主题
        choiceTheme(value){
            this.$set(this.graphOptions,'theme',value)
        },
        watchGraphChartList(){
            var result = util.util.cloneObj(this.graphAllList);
            for(var i =0;i<result.length;i++){
                result[i].active=false;
                for(var j=0;j<this.graphChartList.length;j++){
                    if(result[i].value==this.graphChartList[j]){
                        result[i].active=true;
                    }
                }
            }
            this.graphAllList =result;
        },
        //编辑 属性数据回显
        initEditInfoSet(){
            //元件基本属性回显
            util.util.extendObj(this.chartOptions,this.initdata);
            // console.log('init',this.graphOptions)
            util.util.extendObj(this.titleInfo,this.graphOptions.title);
            if(this.titleInfo.left.indexOf('%')!=-1){
                var left =this.titleInfo.left.replace("%",'');
                this.titleLeft = left ==''?5:parseInt(left);
            }

        },
        //返回元件基本信息
        //操作的options 已经通过事件，返回到了父组件对象
        getGraphInfo(){
            return {
                graphName:this.chartOptions.graphName,
                graphTag:this.chartOptions.graphTag,
                access:this.chartOptions.access,
                remark:this.chartOptions.remark,
                graphId:this.chartOptions.graphId
            }
        },
        formatTooltip(val) {
            return '左偏移'+val+'%';
        },
        //修改元件名称 /判断是否同步按到图表主标题
        changeGraphName(value){
            if(this.graphTitle.sysn){
                this.titleInfo.text =this.chartOptions.graphName;
            }
            // this.$emit("changeName",value) //todo
        },
        //切换图表类型  判断当前维度和数值是否支持选择的图表类型
        choiseChartType(item){
            console.log('切换图表类型')
            if(item.active!=null   && item.active){
                var  next =true;
                if(item.value=='map' ){
                    next=chartUtil.judgeMapData(this.graphOptions.dataset);
                    if(!next)
                    this.$Message.error('地图类型维度必须是行政级别市(例如长沙、北京、上海)');
                }
                if(next){
                    this.$emit("changeType",item.value);
                    this.chartOptions.graphType =item.value;
                }
                
            }
        },
        optionsInit:function(groupNum,clomnNum){
            this.groupNum =groupNum ;
            this.clomnNum =clomnNum;
        },
        //判断和同步  当前选择的维度 数值还有类型  来生成对应的图表options
        sysnOptionByTypeAndCloum(item){
                if(!item.value){
                    return ;
                }
                new chartOptions(this,{
                    type:item.value,
                    groupnum:this.groups.length ,
                    clomnnum:this.numbers.length,
                    extendState:false
                }).initChartOptions();
        },
        //同步  地图处理
        //在处理内容之前  ，一些具体的显示问题，还会处理一次
        //1处理map类型切换的时候  不需要展示 x  y轴  以及缩略效果，切换成其他的类型 ，需要展示

        queryDatasources() {

        },
    },
    mounted(){
        this.init();
    }
}
</script>
<style>
    .box-class{
        width:100px;
    }

</style>
